import { Table, Button, Checkbox, Popconfirm, Divider, Modal, Collapse, Tooltip } from 'antd';
import removeSrc from './remove.png';
import styles from './new-table.less';
import Title from './title';
import Homework from './homework';
import Chapter from './chapter';
import Type from './type';
import React, {useEffect, useImperativeHandle, useRef, useState} from 'react';
import { allGet, allPost } from '@/services/pc';
import { message } from 'antd';
import { useHistory } from 'umi';
import qs from 'qs';
import { calcIndex } from '@/utils';
import classnames from 'classnames';
import collapseHandleImg from './open.png';
import ImportVideo from './importVideo';
import customButtonStyles from '@/pages/pc/components/Upload/MaterialUpload/index.less';
import { DownOutlined } from '@ant-design/icons';
import UpDown from './upDown';
import LessonOpe from '@/pages/pc/lecturer/upload-courses/components/table/lesson-ope';
import qaSrc from './qa.svg';
import { cusSort } from './utils'
import { BjyVideoListModalUpload } from '@/pages/pc/components/Upload';



const Index = React.forwardRef(({ dataSource, reload, loading = true, isModal = false, onSaveSort, ...props }, ref) => {
  const [isSort, setIsSort] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
  const [openedKeys, setOpenedKeys] = useState<string[]>([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);

  const { classid = 0 /* 没有就是0，php认为是新增...*/ } =
    props.classid !== undefined ? props : (useHistory().location as any)?.query;
  const [data, setData] = useState(dataSource || []);
  const [allLesson, setAllLesson] = useState<any[]>([]);
  const allWorks = useRef({})

  const onSelect = (lid) => {
    // console.log(allLesson.map(({ lid: id }) => id));
    if (selectedRowKeys?.includes(lid)) {
      setSelectedRowKeys(selectedRowKeys.filter((item) => item !== lid));
      setIndeterminate(selectedRowKeys.filter((item) => item !== lid).length === 0 ? false : true);
      setCheckAll(false);
    } else {
      setIndeterminate([...selectedRowKeys, lid].length < allLesson.length);
      setCheckAll([...selectedRowKeys, lid].length === allLesson.length);
      setSelectedRowKeys([...selectedRowKeys, lid]);
    }
  };
  const onCheckAllChange = (e: any) => {
    setSelectedRowKeys(e.target.checked ? allLesson.map(({ lid: id }) => id) : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  const onAddVideo = async (values, cid) => {
    // console.log('onAddVideo', values);
    // setDataSource([...dataSource, ...values]);
    if (!values.length) {
      return false;
    }
    const response = await allGet({
      params: {
        mod: 'lesson',
        do: 'add',
        version: 'pc1.0',
        classid,
        cid,
        polyvvids: values.map((item) => item.video_id).join(','),
      },
    });
    if (response.success) {
      reload();
    }
    return response.success;
  };
  const onTitleChange = async (record, name) => {
    // console.log(record, name);
    const response = await allGet({
      params: {
        version: 'pc1.0',
        mod: 'chapter',
        do: 'update',
        cid: record.cid,
        name,
        classid,
      },
    });
    if (response.success) {
      reload();
    }
  };
  const onLessonChange = async (lids, update, needReload = true) => {
    const response = await allGet({
      params: {
        classid,
        version: 'pc1.0',
        mod: 'lesson',
        do: 'update',
        lids,
        ...update,
      },
      paramsSerializer(params) {
        return qs.stringify(params);
      },
    });
    if (response.success && needReload) {
      reload();
    }
  };
  const onWorkChange = (lid, values) => {
    onLessonChange(
      lid,
      {
        ...values,
      },
      false,
    );
  };

  const onDelete = async (mod, key, record) => {
    // if (record.chapter) {
    //   const response = await allGet({
    //     params: {
    //       version: 'pc1.0',
    //       mod: 'chapter',
    //       do: 'deletelesson',
    //       cid: record.chapter,
    //       lids: [record.lid],
    //     },
    //   });
    //   if (response.success) {
    //     message.success('删除成功');
    //     reload();
    //   }
    // } else {
    const params = {
      version: 'pc1.0',
      mod,
      do: 'delete',
      classid,
    } as any;
    if (key === 'lids') {
      params.lids = record[key]?.join(',');
    } else {
      params[key] = record[key];
    }

    const response = await allGet({
      params,
    });
    if (response.success) {
      if (key === 'lids') {
        const newselectedRowKeys = selectedRowKeys.filter((id) => !record[key]?.includes(id));
        setSelectedRowKeys(newselectedRowKeys);
        setIndeterminate(!!newselectedRowKeys.length);
        setCheckAll(false);
      } else {
        const newselectedRowKeys = selectedRowKeys.filter((id) => id !== record[key]);
        setSelectedRowKeys(newselectedRowKeys);
        setIndeterminate(!!newselectedRowKeys.length);
        setCheckAll(false);
      }
      message.success('删除成功');
      reload();
    }
    // }
  };
  const onBatchDelete = async () => {
    if (!selectedRowKeys || !selectedRowKeys.length) {
      message.warning('请选择课时');
    } else {
      console.log(selectedRowKeys);
      // todo 批量删除
      Modal.confirm({
        title: '提示',
        content: '确定批量删除已选中的课时吗？',
        onOk() {
          onDelete('lesson', 'lids', { lids: selectedRowKeys });
        },
      });
    }
  };

  const resetSelect = () => {
    setIndeterminate(false);
    setSelectedRowKeys([]);
    setCheckAll(false);
  };

  // 章节排序
  const onChapterSort = (cid, index, type) => {
    const newData = [...data]
    const current = newData.find(item => item.cid === cid)
    newData.splice(index, 1)
    if(type === 'up'){
      newData.splice(index - 1, 0, current)
    }else{
      newData.splice(index + 1, 0, current)
    }
    setData(newData)
  }

  // 课程排序
  const onLessonSort = (cid, index, lid, type) => {
    let newData = JSON.parse(JSON.stringify(data)).map(item => {
      if(item.cid === cid){
        const current = item.children.find(item => item.lid === lid)
        item.children.splice(index, 1)
        if(type === 'up'){
          item.children.splice(index - 1, 0, current)
        }else{
          item.children.splice(index + 1, 0, current)
        }
      }
      return item
    })
    setData(newData)
  }
  //移动课时到章节
  const moveLessonToChapter = (lid, from, to) => {
    let current = allLesson.find(item => item.lid === lid)
    let newData = JSON.parse(JSON.stringify(data)).map(item => {
      if(item.cid === from){
        return {
          ...item,
          children: item.children.filter(item => item.lid !== lid)
        }
      }else if(item.cid === to){
        return {
          ...item,
          children: [...item.children, current]
        }
      }else{
        return item
      }
    })
    setData(newData)
  }
  // 批量移动课时到章节
  const batchMoveLessonToChapter = (to) => {
    const lessons = allLesson.filter((item) => selectedRowKeys.includes(item.lid))
    const newData = JSON.parse(JSON.stringify(data)).map(item => {
      return {
        ...item,
        children: item.children.filter(item => !selectedRowKeys.includes(item.lid))
      }
    }).map(item => {
      if(item.cid === to){
        return {
          ...item,
          children: [...item.children, ...lessons]
        }
      }else{
        return item
      }
    })
    setData(newData)
    resetSelect()
  };

  const SPLIT_STR = '_cgjoy_split_str_'
  const onSortWithName = () => {
    const newData = JSON.parse(JSON.stringify(data)).map(item => {
      const mm = item.children?.reduce((pre, cur) => {
        pre[`${cur.name}${SPLIT_STR}${cur.lid}`] = cur
        return pre
      }, {})
      return {
        ...item,
        children: Object.keys(mm)?.sort(cusSort)?.map(key => mm[key])
      }
    })
    setData(newData)
  }

  // 开始排序
  const onSortStart = () => {
    resetSelect();
    setIsSort(true);
  };

  // 保存排序
  const onSortEnd = async () => {
    const result = await onSaveSort()
    if(result){
      message.success('保存成功')
      resetSelect();
      setIsSort(false);
      reload()
    }
  };

  // 取消排序
  const onCancelSort = () => {
    resetSelect();
    setData(dataSource);
    setAllLesson(
      dataSource?.reduce((pre, cur) => {
        if (cur.children) {
          pre = [...pre, ...cur.children];
        }
        return pre;
      }, []),
    );
    setIsSort(false);
  };

  // 添加章节
  const onAddChapter = async () => {
    const params = {
      version: 'pc1.0',
      mod: 'chapter',
      do: 'create',
      classid,
      name: '',
      cid: undefined,
    };
    const response = await allGet({
      params,
    });
    if(response.success){
      setOpenedKeys([...openedKeys, response.data.cid])
      message.success('新建成功')
      reload()
    }
  }
  const CustomEmpty = () => (
    <div>
      <div style={{ padding: '70px 0', textAlign: 'center', color: 'rgba(255,255,255, .5)' }}>
        暂无课时，请导入视频生成课时
      </div>
    </div>
  );

  const THead = ({ cIndex, cCount, ...record }: any) => {
    if (record.cid === 0) {
      return (
        <div className={styles.chapter}>
          <span />
          <span>未归类课时</span>
          <span />
          <span />
          <span />
          <span />
        </div>
      );
    }
    return (
      <div className={styles.chapter}>
        <span />
        <span>第 {cIndex + 1} 章</span>
        <span>
          {isSort ? (
            record.name
          ) : (
            <Title
              value={record.name}
              maxWidth={520}
              onChange={(value) => {
                onTitleChange(record, value)
              }}
            />
          )}
        </span>
        <span>
          {!isSort && (
            <Homework
              value={{
                busywork: record.busywork,
                allowbusywork: record.allowbusywork,
                reward: record.reward,
              }}
              onOk={(value) => onWorkChange(record.cid, value)}
            />
          )}
        </span>
        <span />
        <span>
          {!isSort ? (
            <>
              <ImportVideo
                classid={classid}
                handleUploadSuccess={reload}
                cid={record.cid}
                onAddVideo={(values) => onAddVideo(values, record.cid)}
                onImportVideo={() => onImportVideo({ classid, createlesson: 1,cid: record.cid })}
              >
                <div className={customButtonStyles.globalButton}>
                  导入视频 &nbsp;
                  <DownOutlined />
                </div>
              </ImportVideo>

              <Popconfirm
                title={`是否要删除${record.children ? '章节' : '视频'}`}
                okText="删除"
                cancelText="取消"
                overlayClassName="c-tooltip c-tooltip-white"
                onConfirm={() => {
                  if (record.children) {
                    onDelete('chapter', 'cid', record);
                  } else {
                    onDelete('lesson', 'lid', record);
                  }
                }}
                icon={false}
                cancelButtonProps={{
                  style: {
                    background: '#fff',
                    color: '#000',
                    border: '1px solid #DFDFDF',
                  },
                }}
                okButtonProps={{
                  style: {
                    background: '#FF5967',
                    color: '#fff',
                    border: 0,
                  },
                }}
              >
                <div
                  className={classnames(customButtonStyles.globalButton, customButtonStyles.delete)}
                >
                  删除
                </div>
              </Popconfirm>
            </>
          ) : (
            <UpDown canDown={cIndex < cCount - 2} canUp={cIndex > 0} onClick={(type) => onChapterSort(record.cid, cIndex, type)}/>
          )}
        </span>
      </div>
    );
  };

  const LessonTr = ({ lIndex, lCount, ...record }: any) => {
    return (
      <div key={record.lid} className={styles.lesson}>
        <span>
          <Checkbox
            checked={selectedRowKeys?.includes(record.lid)}
            onChange={() => onSelect(record.lid)}
          />
        </span>
        <span>{record.index}</span>
        <span>
          {isSort ? (
            record.name
          ) : (
            <Title
              value={record.name}
              maxWidth={520}
              onChange={(value) => {
                record.children
                  ? onTitleChange(record, value)
                  : onLessonChange(record.lid, { name: value });
              }}
            />
          )}
        </span>
        <span>
          {!isSort && (
            <Homework
              value={allWorks.current[`l${record.lid}`]}
              onOk={(value) => onWorkChange(record.lid, value)}
            />
          )}
        </span>
        <span>
          {!isSort && (
            <Type
              value={{ type: record.type }}
              onChange={(update) => {
                onLessonChange(record.lid, update);
              }}
            />
          )}
        </span>
        <span className={styles.lessonOp}>
          {!isSort ? (
            <Popconfirm
              title={`是否要删除${record.children ? '章节' : '视频'}`}
              okText="删除"
              cancelText="取消"
              overlayClassName="c-tooltip c-tooltip-white"
              onConfirm={() => {
                if (record.children) {
                  onDelete('chapter', 'cid', record);
                } else {
                  onDelete('lesson', 'lid', record);
                }
              }}
              icon={false}
              cancelButtonProps={{
                style: {
                  background: '#fff',
                  color: '#000',
                  border: '1px solid #DFDFDF',
                },
              }}
              okButtonProps={{
                style: {
                  background: '#FF5967',
                  color: '#fff',
                  border: 0,
                },
              }}
            >
              <span data-type="error">删除</span>
            </Popconfirm>
          ) : (
            <>
              <i
                className={classnames([styles.moveUp, { [styles.disabled]: lIndex === 0 }])}
                onClick={lIndex === 0 ? undefined : () => onLessonSort(record.cid, lIndex, record.lid, 'up')}
              />
              <i
                className={classnames([
                  styles.moveDown,
                  { [styles.disabled]: lIndex === lCount - 1 },
                ])}
                onClick={lIndex === lCount - 1 ? undefined :() => onLessonSort(record.cid, lIndex, record.lid,'down')}
              />
              <Divider type="vertical" style={{ borderColor: '#43669C', margin: '0 18px' }} />
              <LessonOpe onClick={(cid) => moveLessonToChapter(record.lid, record.cid, cid)} chapters={data.filter((item) => item.cid !== record.cid && Number(item.cid) !== 0)}/>
            </>
          )}
        </span>
      </div>
    );
  };
  const isFirst = useRef(true);
  useEffect(() => {
    setAllLesson(
      dataSource?.reduce((pre, cur) => {
        if (cur.children) {
          pre = [...pre, ...cur.children];
        }
        return pre;
      }, []),
    );
    allWorks.current = dataSource.reduce((pre, cur) => {
      pre[`c${cur.cid}`] = {
        busywork: cur.busywork,
        allowbusywork: cur.allowbusywork,
        reward: cur.reward,
      }
      if(cur.children){
        cur.children.forEach(it => {
          pre[`l${it.lid}`] = {
            busywork: it.busywork,
            allowbusywork: it.allowbusywork,
            reward: it.reward,
          }
        })
      }
      return pre
    }, {})
    if(isFirst.current && dataSource.length){
      setOpenedKeys(dataSource?.map(({cid}) => cid))
      isFirst.current = false
    }
    setData(dataSource);
  }, [dataSource]);
  useImperativeHandle(ref, () => ({
    getLessonOrders(){
      const params = data.map(({cid, children}) => {
        return {
          cid,
          children: children.map(({lid})=>lid)
        }
      })
      return JSON.stringify(params)
    }
  }))

  const auth = async () => {
    const response = await allGet({ params: { mod: 'polyv', do: 'uploadAuth', version: 'pc1.0' } });
    return { ...(response?.data || {}), ptime: response?.data?.ts };
  };
  const BjyVideoListModalUploadRef = useRef<any>()
  const onImportVideo = (payload) => {
    console.log(payload, 'payload')
    BjyVideoListModalUploadRef?.current?.openSelect({payload})
  }
  const bjyVideoListModalUploadPayload = useRef({})
  return (
    <div className={styles.container} style={{ borderRadius: 4, overflow: 'hidden', marginTop: 30 }}>
      <BjyVideoListModalUpload
          getPlvAuth={auth}
          payload={bjyVideoListModalUploadPayload.current}
          ref={BjyVideoListModalUploadRef}
          refreshPlvAuth={auth}
          onSuccess={() => setTimeout(reload, 500)}
        />
       
      <div className={styles.header}>
        <div className={styles.left}>
          <div className={styles.line} />
          <div className={styles.text}>课时管理</div>
          <div className={styles.subtext}>Lesson management</div>
        </div>
      </div>
      <div className={styles.body}>
        <div className={styles.newBtns}>
          <div>
            {!isSort ? (selectedRowKeys?.length ? <Popconfirm
                title="是否要批量删除"
                okText="删除"
                cancelText="取消"
                overlayClassName="c-tooltip c-tooltip-white"
                onConfirm={onBatchDelete}
                icon={false}
                cancelButtonProps={{
                  style: {
                    background: '#fff',
                    color: '#000',
                    border: '1px solid #DFDFDF',
                  },
                }}
                okButtonProps={{
                  style: {
                    background: '#FF5967',
                    color: '#fff',
                    border: 0,
                  },
                }}
                > <Button
                  type="primary"
                  className={styles['btn-delete']}
                  danger
                >
                  批量删除
                </Button> </Popconfirm>:
              <Button
                type="primary"
                className={styles['btn-delete']}
                danger
                disabled
              >
                批量删除
              </Button>
            ) : (
              selectedRowKeys?.length ? <LessonOpe onClick={(cid) => batchMoveLessonToChapter(cid)} chapters={data}>
                <div
                  style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton}
                  disabled={!selectedRowKeys || !selectedRowKeys.length}
                >
                  批量移至章节
                </div>
              </LessonOpe> : <div style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton} disabled>批量移至章节</div>
            )}

            {isSort && [
              <div style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton} onClick={onSortWithName}>
                按课时名称排序
              </div>,
              <Tooltip color="#fff" overlayInnerStyle={{padding: 0, borderRadius: 10, width: 470}} title={<div style={{color: '#000'}} >
                <div style={{lineHeight: '44px', background: '#F1F1F1', textAlign: 'center', borderRadius: '10px 10px 0px 0px'}}>按课时名称排序规则说明</div>
                <div style={{ padding: 14}}>
                  <div>排序规则：根据课时名称首字母排序 </div>
                  <div>若同时存在阿拉伯数字、汉字、英文字母，依次按数字>汉字>字母排序</div>
                  <div style={{color: '#FF4545', margin: '14px 0'}}>建议使用阿拉伯数字作为课时名称前缀命名</div>
                  <div>示例：</div>
                  <div>1、XX</div>
                  <div>2、XX</div>
                  <div>3、XX</div>
                </div>
              </div>}>
                <img style={{cursor: 'pointer'}} src={qaSrc} alt="qa" />
              </Tooltip>,
              <div style={{height: 18, width: 1, background: 'rgba(255,255,255, .2)', margin: '0 30px' }}></div>
            ]}

            {isSort ? (
              [
                <div style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton} onClick={onSortEnd}>
                  保存当前排序
                </div>,
                <div style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton} onClick={onCancelSort}>取消</div>,
              ]
            ) : (
              <div style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton} onClick={onSortStart}>
                编辑排序
              </div>
            )}
          </div>
          <div>
            {
              !isSort && <>
                {/*<Chapter reload={reload} dataSource={data} />*/}
                <div style={{fontSize: 14, padding: '4px 16px'}} className={customButtonStyles.globalButton} onClick={onAddChapter}>新建章节</div>
                <ImportVideo  classid={classid} handleUploadSuccess={reload} onAddVideo={onAddVideo} onImportVideo={() => onImportVideo({ classid, createlesson: 1, })} />
              </>
            }
          </div>
        </div>
        <div className={styles.tableContent}>
          <div className={styles.thead}>
            <span>
              <Checkbox
                indeterminate={indeterminate}
                onChange={onCheckAllChange}
                checked={checkAll}
              />
            </span>
            <span>序号</span>
            <span>标题</span>
            <span>有无作业</span>
            <span>课程类型</span>
            <span>操作</span>
          </div>
        </div>
        <Collapse
          activeKey={openedKeys}
          onChange={setOpenedKeys}
          expandIcon={(panelProps) => {
            return (
              <img
                className={classnames(styles.collapseHandle, {
                  [styles.collapseHandleActive]: panelProps.isActive,
                })}
                src={collapseHandleImg}
                alt=""
              />
            );
          }}
        >
          {calcIndex(data)?.map((record, i) => (
            <Collapse.Panel
              collapsible={'icon'}
              header={record.cid === 0 ? <div className={styles.chapter}>
                <span />
                <span>未归类课时</span>
                <span />
                <span />
                <span />
                <span />
              </div> : <div className={styles.chapter}>
                <span />
                <span>第 {i + 1} 章</span>
                <span>
          {isSort ? (
            record.name
          ) : (
            <Title
              value={record.name}
              maxWidth={520}
              onChange={(value) => {
                onTitleChange(record, value)
              }}
            />
          )}
        </span>
                <span />
                <span />
                <span>
          {!isSort ? (
            <>
              <ImportVideo
                classid={classid}
                handleUploadSuccess={reload}
                cid={record.cid}
                onAddVideo={(values) => onAddVideo(values, record.cid)}
                onImportVideo={() => onImportVideo({ classid, createlesson: 1,cid: record.cid })}
              >
                <div className={customButtonStyles.globalButton}>
                  导入视频 &nbsp;
                  <DownOutlined />
                </div>
              </ImportVideo>

              <Popconfirm
                title={`是否要删除${record.children ? '章节' : '视频'}`}
                okText="删除"
                cancelText="取消"
                overlayClassName="c-tooltip c-tooltip-white"
                onConfirm={() => {
                  if (record.children) {
                    onDelete('chapter', 'cid', record);
                  } else {
                    onDelete('lesson', 'lid', record);
                  }
                }}
                icon={false}
                cancelButtonProps={{
                  style: {
                    background: '#fff',
                    color: '#000',
                    border: '1px solid #DFDFDF',
                  },
                }}
                okButtonProps={{
                  style: {
                    background: '#FF5967',
                    color: '#fff',
                    border: 0,
                  },
                }}
              >
                <div
                  className={classnames(customButtonStyles.globalButton, customButtonStyles.delete)}
                >
                  删除
                </div>
              </Popconfirm>
            </>
          ) : (
            <UpDown canDown={i < data.length - 2} canUp={i > 0} onClick={(type) => onChapterSort(record.cid, i, type)}/>
          )}
        </span>
              </div>}
              key={record.cid}
              showArrow={Number(record.cid) !== 0}
            >
              {record.children && record.children.length ? (
                record.children.map((lesson, index) => (
                  <div key={lesson.lid} className={styles.lesson}>
        <span>
          <Checkbox
            checked={selectedRowKeys?.includes(lesson.lid)}
            onChange={() => onSelect(lesson.lid)}
          />
        </span>
                    <span>{lesson.index}</span>
                    <span>
          {isSort ? (
            lesson.name
          ) : (
            <Title
              value={lesson.name}
              maxWidth={520}
              onChange={(value) => {
                lesson.children
                  ? onTitleChange(lesson, value)
                  : onLessonChange(lesson.lid, { name: value });
              }}
            />
          )}
        </span>
                    <span>
          {!isSort && (
            <Homework
              value={allWorks.current[`l${lesson.lid}`]}
              onOk={(value) => onWorkChange(lesson.lid, value)}
            />
          )}
        </span>
                    <span>
          {!isSort && (
            <Type
              value={{ type: lesson.type }}
              onChange={(update) => {
                onLessonChange(lesson.lid, update);
              }}
            />
          )}
        </span>
                    <span className={styles.lessonOp}>
          {!isSort ? (
            <Popconfirm
              title={`是否要删除${lesson.children ? '章节' : '视频'}`}
              okText="删除"
              cancelText="取消"
              overlayClassName="c-tooltip c-tooltip-white"
              onConfirm={() => {
                if (lesson.children) {
                  onDelete('chapter', 'cid', lesson);
                } else {
                  onDelete('lesson', 'lid', lesson);
                }
              }}
              icon={false}
              cancelButtonProps={{
                style: {
                  background: '#fff',
                  color: '#000',
                  border: '1px solid #DFDFDF',
                },
              }}
              okButtonProps={{
                style: {
                  background: '#FF5967',
                  color: '#fff',
                  border: 0,
                },
              }}
            >
              <span data-type="error">删除</span>
            </Popconfirm>
          ) : (
            <>
              <i
                className={classnames([styles.moveUp, { [styles.disabled]: index === 0 }])}
                onClick={index === 0 ? undefined : () => onLessonSort(record.cid, index, lesson.lid, 'up')}
              />
              <i
                className={classnames([
                  styles.moveDown,
                  { [styles.disabled]: index === record.children.length - 1 },
                ])}
                onClick={index === record.children.length - 1 ? undefined :() => onLessonSort(record.cid, index, lesson.lid,'down')}
              />
              <Divider type="vertical" style={{ borderColor: '#43669C', margin: '0 18px' }} />
              <LessonOpe onClick={(cid) => moveLessonToChapter(lesson.lid, record.cid, cid)} chapters={data.filter((item) => item.cid !== record.cid && Number(item.cid) !== 0)}/>
            </>
          )}
        </span>
                  </div>
                ))
              ) : (
                <CustomEmpty />
              )}
            </Collapse.Panel>
          ))}
        </Collapse>
      </div>
    </div>
  );
});
export default Index;
